<template>
	<view class="eval-box">
		<view class="personal-box">
			<image class="portrait" :src="res.workerIcon || '/static/missing-face.png'"></image>
			<text>{{res.workerName}}修理水管</text>
		</view>	
		<block v-for="(item,index) in statusList" :key="index">
			<view class="row">
				<text class="tit">{{item.title}}：</text>
				<rate @change="onChange($event,item.keys)" :size="38"></rate>
			</view>
			<view v-if="index==0">
				<textarea class="textarea" v-model="form.content" rows="8" placeholder="输入评价内容…"></textarea>
				<label class="radio" @click="changeRadio">
					<h-icon src="selected" v-if="form.isDefault==1"></h-icon>
					<h-icon src="select" v-else></h-icon>
					是否匿名
				</label>
			</view>
		</block>
		<button class="add-btn" @click="confirm">保存</button>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import rate from "@/components/rate.vue";  
	export default {
		components:{
			rate
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				statusList:[{
					title:'基础评价',
					keys:'score'
				},{
					title:'材料质量',
					keys:'productScore'
				},{
					title:'维修效果',
					keys:'expressScore'
				},{
					title:'服务态度',
					keys:'serviceScore'
				}],
				form: {
					content: '',
					userId: '',
					orderId:'',
					isDefault:2
				},
				res:{}
			}
		},
		onLoad(options){
			this.res = JSON.parse(options.data)
			this.form.orderId = this.res.orderId
			this.form.userId =  this.userInfo.userId
		},
		methods: {
			changeRadio(){
				this.form.isDefault = this.form.isDefault==1?2:1
			},
			onChange($event,key){
				this.form[key] = $event.value
			},
			//提交
			confirm(){
				for(let i = 0;i<this.statusList.length;i++){
					let item = this.statusList[i]
					console.log(item)
					if(!this.form[item.keys]){
						this.$api.msg(`请选择${item.title}评分`);
						return
					}
				}
				
				this.$apis.postApi('/order/evaluation',this.form).then(({code}) => {
					if(code==200){
						this.$api.prePage().loadData('refresh') // 获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
						this.$api.msg(`评价成功`);
						setTimeout(()=>{
							uni.navigateBack()
						}, 800)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.eval-box{
		padding: 0 24upx 180upx;
		background: #fff;
		border-radius: 16upx;
		position: absolute;
		top: 20upx;
		left: 20upx;
		right: 20upx;
		bottom: 20upx;
	}
	.personal-box{
		height: 60upx;
		display:flex;
		align-items:center;
		position:relative;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
		.portrait{
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			margin-right: 22upx;
			background: #f3f3f3;
		}
	}
	.row{
		display: flex;
		align-items: center;
		margin-top: 35upx;
		.tit{
			font-size: 28upx;
			font-weight: bold;
		}
	}
	.textarea{
		height: 318upx;
		background: #F9F8F8;
		border-radius: 16upx;
		margin: 30upx 0 25upx;
		font-size: 30upx;
		padding: 20upx;
		width: 100%;
		box-sizing: border-box;
	}
	.radio{
		display: flex;
		align-items: center;
		font-size: 28upx;
		margin-bottom: 30upx;
		/deep/ .hicon{
			width: 34upx;
			height: 34upx;
			margin-right: 20upx;
			display: block;
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88upx;
		font-size: 30upx;
		font-weight: 500;
		border-radius: 0;
		margin-bottom: 40upx;
		background: linear-gradient(360deg, #3B99FF 0%, #4083F0 100%);
		border-radius: 44upx;
		margin: 98upx 16upx;
	}
</style>
